<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团购-首页</title>

    <meta name="Kaywords" content="">
    <meta name="Description" content="">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>

<body>
    <div class="web">
        <!-- 头部S -->
        <header>
            <div class="psifl">
                <div class="logo_box">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="search_box">
                    <form action="">
                        <input name="" type="text" placeholder="请输入商品名称">
                        <button><i class="iconfont icon-sousuo"></i></button>
                    </form>
                </div>
                <div class="city_box">
                    <select name="" id="">
                        <option value="">广州</option>
                        <option value="">深圳</option>
                        <option value="">韶关</option>
                    </select>
                </div>
            </div>
        </header>
        <!-- 头部E -->

        <!-- 主体S -->
        <section>
            <div class="kv">
                <img src="./img/sy_kv.jpg" alt="">
                <div class="guntiao"></div>
            </div>
            <div class="subtitle">
                <div class="subtitle_left">
                    <i class="iconfont icon-wubanhua"></i>
                    <span>优惠团购</span>
                </div>
                <a href="#">
                    <div class="subtitle_right">
                        <span>更多</span>
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </a>
            </div>
            <div class="discounts">
                <ul>
                    <li>
                        <a href="">
                            <span class="yh">
                                <img src="./img/sy_gbj1.jpg" alt="">
                            </span>
                        </a>
                        <a href="">
                            <span class="yh">
                                <img src="./img/sy_gbj2.jpg" alt="">
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span class="yh">
                                <img src="./img/sy_gbj3.jpg" alt="">
                            </span>
                        </a>
                        <a href="">
                            <span class="yh">
                                <img src="./img/sy_gbj4.jpg" alt="">
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="subtitle">
                <div class="subtitle_left">
                    <i class="iconfont icon-xin"></i>
                    <span>猜你喜欢</span>
                </div>
                <a href="#">
                    <div class="subtitle_right">
                        <span>更多</span>
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </a>
            </div>
            <div class="details">
                <div class="details_tu">
                    <img src="./img/sy_gbj5.jpg" alt="">
                </div>
                <div class="price">
                    <a href="http://woojinz.gitee.io/bluej_027_project_group.com/detail.html">
                        <div class="price_name">
                            <p>万岁寿司（正佳店）</p>
                            <span>&lt100m</span>
                        </div>
                    </a>
                    <div class="price_meal">
                        <span>[100店通用]</span>
                        <span>双人套餐</span>
                    </div>
                    <div class="price_sell">
                        <p><i class="iconfont icon-qian"></i>88.00<span></p>
                        <span>已售1000</span>
                    </div>
                </div>
            </div>
            <div class="details">
                <div class="details_tu">
                    <img src="./img/sy_gbj6.jpg" alt="">
                </div>
                <div class="price">
                    <div class="price_name">
                        <p>周黑鸭（正佳店）</p>
                        <span>&lt100m</span>
                    </div>
                    <div class="price_meal">
                        <span>[100店通用]</span>
                        <span>双人套餐</span>
                    </div>
                    <div class="price_sell">
                        <p><i class="iconfont icon-qian"></i>88.00<span></p>
                        <span>已售1000</span>
                    </div>
                </div>
            </div>
            <div class="details">
                <div class="details_tu">
                    <img src="./img/sy_gbj5.jpg" alt="">
                </div>
                <div class="price">
                    <div class="price_name">
                        <p>万岁寿司（正佳店）</p>
                        <span>&lt100m</span>
                    </div>
                    <div class="price_meal">
                        <span>[100店通用]</span>
                        <span>双人套餐</span>
                    </div>
                    <div class="price_sell">
                        <p><i class="iconfont icon-qian"></i>88.00<span></p>
                        <span>已售1000</span>
                    </div>
                </div>
            </div>
        </section>
        <!-- 主体E -->

        <!-- 尾部S -->
        <footer>
            <ul>
                <li>
                    <a href="http://woojinz.gitee.io/bluej_027_project_group.com/">
                        <i class="iconfont icon-yemian"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="http://woojinz.gitee.io/bluej_027_project_group.com/classify.html">
                        <i class="iconfont icon-fenlei"></i>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="http://woojinz.gitee.io/bluej_027_project_group.com/discover.html">
                        <i class="iconfont icon-compass-o"></i>
                        <p>发现</p>
                    </a>
                </li>
                <li>
                    <a href="http://woojinz.gitee.io/bluej_027_project_group.com/my.html">
                        <i class="iconfont icon-wode"></i>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </footer>
        <!-- 尾部E -->

    </div>
</body>

<script>
    document.body.style.height = window.innerHeight + "px";
    //获取可视区域高度,并固定可视高度,使得手机键盘弹起来时候,页面底部不会被顶上去
</script>

</html>